<template>
    <div class="cont">
        <div class="left">
            <div class="left2">
                <div class="bt">施工相册</div>
                <div class="block schart-box" v-show="phoshow">
                    <el-carousel height="250px">
                        <el-carousel-item v-for="item in imagesbox" :key="item.id">
                            <img style="height: 250px; width: 380px" :src="item" class="image" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="xce" v-show="xce"><img src="../../assets/img/zanwu.png" alt="" /></div>
            </div>
            <div class="left3">
                <div class="bt">项目建设信息</div>
                <div class="ct">
                    工程造价：11.9亿元<br />
                    开竣工日期：2020年12月15日-2024年6月14日&nbsp;总工期42个月<br />
                    建设单位：河南城际铁路有限公司<br />
                    设计单位：中铁第四勘察设计院集团有限公司<br />
                    监理单位：成都西南交大工程建设咨询监理有限责任公司<br />
                    施工单位：中铁七局集团有限公司
                </div>
            </div>
        </div>
        <div class="center">
            <div class="shipin">
                <video
                    src="http://jjjt.oss-cn-shanghai.aliyuncs.com/dangjian/qyxcp.mp4"
                    type="video/mp4"
                    controls="controls"
                    autoplay="autoplay"
                ></video>
            </div>
            <div class="center1">
                <div class="bt1">项目里程碑</div>
                <div id="schart5" v-show="hahashow">
                    <div class="conts">
                        <div v-for="(value, index) in realData" :key="index">
                            <img :src="value.img_url" alt="" />
                            <i>{{ value.project_name }}</i>
                            <div></div>
                            <span style="color: #fff; text-align: center">完工时间：{{ value.plan_start }}</span>
                        </div>

                        <div style="width: 40px"></div>
                    </div>
                </div>
                <div class="zanwu" v-show="lcbshow"><img src="../../assets/img/zanwu.png" alt="" /></div>
            </div>
        </div>
        <div class="right">
            <div class="bt2">项目简介</div>
            <div class="ct1">
                中铁七局集团茂名制梁场位于广东省茂名市电白区大章班村，临近包茂高速，交通便利，梁场占地面积约228亩，承担广湛铁路GZZQ-8标859孔预制箱梁的预制生产任务，其中31.5m箱梁820孔，23.5m箱梁38孔，28.5m箱梁1孔。采用通桥（2016）2322A-Ⅱ-1系列图纸；混凝土强度等级为C50高性能混凝土，共计269538m3。梁场用地计划征用两年。根据广湛公司和总承包项目部的要求，茂名制梁场考虑了原9标新增300片双线箱梁的预制存储能力。制梁场内设置制梁区、存梁区、钢筋加工区、拌和站、办公区及民工生活区。制梁区共计12个制梁台座（预留2个制梁台座）。双线钢筋绑扎胎具5个，2个钢筋吊具，4个活动雨棚。4个布料机，存梁区共计109个双层存梁台座（预留双层存梁台座20个），洒水养护台座共计28个；梁场最大生产能力60榀/月，最大存梁能力190榀。箱梁预制在制梁区完成，采用两台HZS180型拌和站集中拌制混凝土，地泵+布料机的方式完成混凝土的浇筑作业。
            </div>
        </div>
    </div>
</template>
<script>
import ajax from '@/utils/myajax';

export default {
    data() {
        return {
            xce: false,
            phoshow: true,
            lcbshow: false,
            hahashow: true,
            realData: [],
            imagesbox: []
        };
    },
    methods: {},

    mounted() {
        var me = this;
        me.section_id = localStorage.getItem('section_id');
        ajax('JkToken/FindJkToken', { section_id: me.section_id }, function (data) {
            localStorage.setItem('vidiotoken', data);
        });
        ajax('ConstructionPhoto/SelectConstructionPhoto', { section_id: me.section_id }, function (data) {
            var arr = data;
            if (data.length == 0) {
                me.phoshow = false;
                me.xce = true;
            }
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].url) {
                    arr[i].url = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + arr[i].url;
                }
            }
            me.imagesbox = arr.map((item) => item.url);
            console.log(me.imagesbox, 121);
        });
        ajax('Milestone/SelectMilestone', { section_id: me.section_id }, function (data) {
            if (data.length == 0) {
                me.lcbshow = true;
                me.hahashow = false;
            }
            var arr = data;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].img_url) {
                    arr[i].img_url = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + arr[i].img_url;
                }
            }
            me.realData = arr;
        });
    }
};
</script>
<style scoped>
#schart5 {
    float: left;
    margin-left: 4px;
    width: 820px;
    height: 303px;
    overflow-x: scroll;
    overflow-y: hidden;
}

#schart55 img {
    display: block;
    margin-top: 45px;
    margin-left: 335px;
    width: 150px;
    height: 150px;
}

#schart55 span {
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}

.conts {
    padding: 0 20px;
    margin-top: 35px;
    width: 835px;
    height: 280px;
    /* background: sandybrown; */
    display: -webkit-box;
    justify-content: space-around;
}

.conts div {
    /* margin-left: 1px; */
    width: 180px;
    /* padding: 0 10px; */
    /* background: sandybrown; */
}

.conts div div {
    margin-top: 0px;
    width: 180px;
    height: 48px;
    text-align: center;
    color: white;
    background: url(../../assets/img/bjing1.png) no-repeat;
    background-size: 100% 100%;
}

.conts div img {
    width: 160px;
    height: 100px;
    margin-left: 10px;
}

.conts div i {
    display: block;
    height: 51px;
    width: 180px;
    color: #ffffff;
    font-style: normal;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
}

.conts div span {
    display: block;
    height: 28px;
    width: 180px;
    margin-top: 15px;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
}

.cont {
    padding-top: 20px;
    width: 100%;
    height: 100%;
    /* background: url(https://jjjt.oss-cn-shanghai.aliyuncs.com/lankao/sy.jpg) no-repeat; */
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
}

.left {
    width: 351px;
    height: 784px;
}

.shipin {
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    width: 835px;
    height: 474px;
}

.center {
    width: 881px;
    height: 784px;
    /* background: chartreuse; */
    margin-left: 100px;
}

.center1 {
    position: relative;
    margin-top: 25px;
    width: 842px;
    margin-left: 17px;
    height: 311px;
    background: url(../../assets/img/sy3.png) no-repeat;
    background-size: 100% 100%;
}

.zanwu {
    width: 880px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zanwu img {
    /* margin-top: 30px; */
    width: 300px;
    height: 300px;
}

.right {
    width: 436px;
    height: 777px;
    /* background: chartreuse; */
    background: url(../../assets/img/sy5.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 35px;
    margin-right: 20px;
}

.bt2 {
    width: 150px;
    height: 30px;
    position: absolute;
    left: 145px;
    top: -18px;
    font-size: 22px;
    color: white;
    text-align: center;
}

.ct1 {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 35px;
    
   
    height: 710px;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 7px;
}

.left1 {
    width: 159px;
    height: 57px;
    margin-left: 20px;
    background: url(../../assets/img/sy1.png) no-repeat;
    background-size: 100% 100%;
    line-height: 57px;
    font-size: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #effeff;
}



.left2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-left: 20px;
    width: 439px;
    height: 340px;
    background: url(../../assets/img/sy2.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.schart-box {
    width: 380px;
    height: 250px;
}

.xce {
    width: 380px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.xce img {
    /* margin-top: 30px; */
    width: 200px;
    height: 200px;
}

.bt {
    width: 150px;
    height: 60px;
    position: absolute;
    left: 147px;
    top: -24px;
    font-size: 21px;
    color: white;
    text-align: center;
}

.bt1 {
    width: 181px;
    height: 30px;
    position: absolute;
    left: 350px;
    top: -20px;
    font-size: 18px;
    color: white;
    text-align: center;
}

.left3 {
    margin-left: 20px;
    margin-top: 100px;
    width: 439px;
    height: 340px;
    background: url(../../assets/img/sy2.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.ct {
    float: left;
    margin-top: 20px;
    margin-left: 30px;
    width: 370px;
    height: 300px;
    line-height: 36px;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
}

div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

div::-webkit-scrollbar-track {
     background: #68b7d6;
}

div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}

div::-webkit-scrollbar-corner {
    background: #179a16;
}
</style>